<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="mySheet.css">
    <style>
        .float_right {
            float: right;
            margin-right: 20px;
        }

        .clearFloat {
            clear: both;
            margin: 5px;
        }
    </style>
</head>
<div>
    <h3>元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 如果图像是右浮动，下面的文本流将环绕在它左边：
    </h3>
    <div class="dv_show float_right"></div>
    <div class="dv_show float_right"></div>
    <p class="clearFloat">为了避免浮动造成布局混乱，清除浮动，使用clear:both</p>

    <div>
        <h3>文字和图片在一起，使用浮动时，图片一直处于右侧</h3>
        <p>
            <img class="float_right" src="img/yellow.jpg" /> 测试文字，这些是在段落里面增加图片，图片一直处于右边 测试文字，这些是在段落里面增加图片，图片一直处于右边 测试文字，这些是在段落里面增加图片，图片一直处于右边
            测试文字，这些是在段落里面增加图片，图片一直处于右边 测试文字，这些是在段落里面增加图片，图片一直处于右边
        </p>
    </div>
</div>

</html>